@W-20224267 Passkey login in checkout by hajinsuha1 · Pull Request #3585 · SalesforceCommerceCloud/pwa-kit

hajinsuha1 · 2026-01-19T15:53:23Z

Description

Integrates the passkey login flow into the checkout page.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

add new usePasskeyLogin hook to be used to initiate passkey login
call usePasskeyLogin from ContactInfo page
merge basket
error handling

How to Test-Drive This PR

navigate to https://wasatch-mrt-jinsu.sfdc-shbmgi-ecom1.exp-delivery-staging-ci.com/

No Passkey Registered

Add an item to your cart
Navigate to the checkout page
Verify you are not prompted for a passkey and no error is displayed

Passkey Registered

Login via password or passwordless and register a passkey using the Create Passkey prompt
1. Get the OTP code from your email
Logout
Add an item to your cart
Navigate to the checkout page
Follow the prompts to login with your passkey
Verify you are logged in and items in your basket have been merged

Error messages

Logout and open the checkout page again
Cancel all the passkey login prompts and verify a something went wrong error message is displayed

Passkey feature disabled

Start the app locally

git checkout W-20224267-passkey-login-in-checkout
cd packages/template-retail-react-app
npm start

Add an item to your cart
Navigate to the checkout page
Verify you are not prompted for a passkey and no error is displayed

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

…ent renders

cc-prodsec · 2026-01-19T15:53:37Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

…error handling - Integrated finishWebauthnAuthentication to complete the passkey login flow. - Improved error handling and logging for authentication processes. - Added helper functions for base64url encoding/decoding to facilitate credential processing.

…n-checkout

…st environment settings

…en updated

hajinsuha1 · 2026-01-23T19:10:53Z

packages/commerce-sdk-react/src/auth/index.ts

+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TODO: user_id is optional, but commerce-sdk-isomorphic expects it to be required. Remove this comment after commerce-sdk-isomorphic is updated.


need to remove this comment after commerce-sdk-isomorphic is updated with recent OAS change that makes user_id optional

hajinsuha1 · 2026-01-23T19:47:07Z

packages/template-retail-react-app/app/hooks/use-auth-modal.js

 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
+/* global PublicKeyCredential */


currently eslint is using es6 which does not contain PublicKeyCredential.
This fix allows us to use it without updating the eslint config. Later we can speak to the PWA kit about upgrading but for now it seems this is the practice that is used for other similar variables

pwa-kit/packages/template-retail-react-app/app/components/island/index.jsx

Line 8 in 051f1a0

/* global globalThis */

…unit test

…er changes to isRegistered in a useEffect

This reverts commit 1b88a0e.

… unit tests

…and adjust registration check logic

…cted body, improving type safety and clarity.

…y login

hajinsuha1 · 2026-01-26T21:45:18Z

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

+            } catch (error) {
+                setError(formatMessage(API_ERROR_MESSAGE))
+            }


here we catch any errors and that were thrown during the webauthn flow and display a generic error message. More detailed error handling will be done as part of https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE00002TfC8TYAV/view

… login, ensuring basket is merged for registered customers.

…in/registration pages to ensure consistent access through the window object.

…n-checkout

packages/template-retail-react-app/app/hooks/use-passkey-login.js

yunakim714 · 2026-01-27T20:04:34Z

packages/template-retail-react-app/app/hooks/use-passkey-login.js

+    const uint8arrayToBase64url = (input) => {
+        const uint8array = new Uint8Array(input)
+        const base64 = base64Encode(uint8array.buffer)
+        return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+    }


We don't have to address this in this PR but it seems this util function is used across multiple components for webauthn. We should consider placing this in a utils module

packages/template-retail-react-app/app/hooks/use-passkey-login.test.js

Found some bugs during testing

Co-authored-by: Yuna Kim <84923642+yunakim714@users.noreply.github.com> Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>

… ArrayBuffer to base64url conversion, improving code reusability and clarity. Add unit tests for the new utility function.

….com/SalesforceCommerceCloud/pwa-kit into W-20224267-passkey-login-in-checkout

…rphic has been updated

Implement passkey login hook and call it when the contact-info compon…

678cf40

…ent renders

hajinsuha1 and others added 10 commits January 19, 2026 15:52

add unit tests and rename to loginWithPasskey

b6ea2d4

rename startPasskeyLogin to loginWithPasskey in contact-info

dfbd5bb

Merge branch 'feature/webauthn-login' into W-20224267-passkey-login-i…

74d3679

…n-checkout

use toJSON to encode credential and fallback to manual encoded on error

aff8cd5

Update ESLint configuration to use latest ECMAScript version and adju…

ba1f2d0

…st environment settings

add unit test for fallback to manual encoding

4be0858

remove window.PublicKeyCredential call now that eslint version has be…

baeeeb5

…en updated

ensure errors are displayed when loginWithPasskey fails

8513ed3

update eslint and remove es2025

03887c1

hajinsuha1 added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jan 23, 2026

hajinsuha1 added 4 commits January 23, 2026 11:29

increase bundle size

8130e6e

Update ESLint configuration to support ECMAScript 2024

2cee2cf

revert eslint changes and use /* global PublicKeyCredential */

5ed8117

update unit tests

17fa736

hajinsuha1 commented Jan 23, 2026

View reviewed changes

revert unnecessary changes to bundle size and eslint

d9c5324

hajinsuha1 commented Jan 23, 2026

View reviewed changes

hajinsuha1 marked this pull request as ready for review January 23, 2026 20:03

hajinsuha1 requested a review from a team as a code owner January 23, 2026 20:03

hajinsuha1 added 8 commits January 23, 2026 16:12

Handle NotAllowedError in usePasskeyLogin hook and add corresponding …

d2c4c05

…unit test

Refactor contact info handling to handle merge basket when the custom…

c52520f

…er changes to isRegistered in a useEffect

Test commit

1b88a0e

Revert "Test commit"

02cc12b

This reverts commit 1b88a0e.

Enhance usePasskeyLogin hook to include usid and update corresponding…

c2cbe12

… unit tests

Update contact info component to merge basket after successful login …

7c599ea

…and adjust registration check logic

Update bundle size limits in package.json for main.js and vendor.js

0176e46

Refactor Webauthn unit tests to use specific types for input and expe…

051f1a0

…cted body, improving type safety and clarity.

Update contact info component to ensure basket is merged after passke…

5a59bac

…y login

hajinsuha1 commented Jan 26, 2026

View reviewed changes

hajinsuha1 and others added 4 commits January 27, 2026 10:50

Update contact info component to call handleMergeBasket after passkey…

54d95fc

… login, ensuring basket is merged for registered customers.

Refactor usage of PublicKeyCredential in authentication hooks and log…

2c8c8dc

…in/registration pages to ensure consistent access through the window object.

lint

68da030

Merge branch 'feature/webauthn-login' into W-20224267-passkey-login-i…

c394c40

…n-checkout

yunakim714 reviewed Jan 27, 2026

View reviewed changes

yunakim714 previously approved these changes Jan 27, 2026

View reviewed changes

hajinsuha1 and others added 4 commits January 28, 2026 09:26

Update copyright year for new files

e919f5f

Co-authored-by: Yuna Kim <84923642+yunakim714@users.noreply.github.com> Signed-off-by: Jinsu Ha <91205717+hajinsuha1@users.noreply.github.com>

Refactor passkey registration and login to utilize shared utility for…

7509729

… ArrayBuffer to base64url conversion, improving code reusability and clarity. Add unit tests for the new utility function.

Merge branch 'W-20224267-passkey-login-in-checkout' of https://github…

238934c

….com/SalesforceCommerceCloud/pwa-kit into W-20224267-passkey-login-in-checkout

update bundle size

0d7f07b

hajinsuha1 requested review from jeremy-jung1 and yunakim714 January 28, 2026 15:06

Remove ts-ignore for resetPassword method now that commerce-sdk-isomo…

2e04a99

…rphic has been updated

jeremy-jung1 approved these changes Jan 29, 2026

View reviewed changes

hajinsuha1 merged commit 6c26eba into feature/webauthn-login Jan 29, 2026
18 of 42 checks passed

hajinsuha1 deleted the W-20224267-passkey-login-in-checkout branch January 29, 2026 22:12

hajinsuha1 mentioned this pull request Feb 2, 2026

[DO NOT MERGE WIP] Feature: WebAuthn Login #3580

Draft

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-20224267 Passkey login in checkout#3585

@W-20224267 Passkey login in checkout#3585
hajinsuha1 merged 34 commits intofeature/webauthn-loginfrom
W-20224267-passkey-login-in-checkout

hajinsuha1 commented Jan 19, 2026 •

edited

Loading

Uh oh!

cc-prodsec commented Jan 19, 2026 •

edited

Loading

Uh oh!

hajinsuha1 Jan 23, 2026

Uh oh!

hajinsuha1 Jan 23, 2026 •

edited

Loading

Uh oh!

hajinsuha1 Jan 26, 2026 •

edited

Loading

Uh oh!

Uh oh!

yunakim714 Jan 27, 2026

Uh oh!

hajinsuha1 Jan 28, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore TODO: user_id is optional, but commerce-sdk-isomorphic expects it to be required. Remove this comment after commerce-sdk-isomorphic is updated.

Conversation

hajinsuha1 commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

No Passkey Registered

Passkey Registered

Error messages

Passkey feature disabled

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

hajinsuha1 Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yunakim714 Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

hajinsuha1 Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hajinsuha1 commented Jan 19, 2026 •

edited

Loading

cc-prodsec commented Jan 19, 2026 •

edited

Loading

hajinsuha1 Jan 23, 2026 •

edited

Loading

hajinsuha1 Jan 26, 2026 •

edited

Loading